<template>
  <div class="login-container">
    <!--粒子插件-->
    <vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="60" shapeType="circle"
      :particleSize="4" linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4"
      :linesDistance="150" :moveSpeed="2" :hoverEffect="true" hoverMode="grab" :clickEffect="true"
      clickMode="push" class="lizi">
    </vue-particles>
    <!--登录表单-->
    <el-form ref="refForm" :model="loginForm" :rules="loginRules" label-position="left"
             status-icon label-width="0px" class="login-box">
      <h3 class="login-title">欢迎登录OWL管理系统</h3>
      <el-form-item prop="username">
        <el-input type="text" prefix-icon="el-icon-user-solid" placeholder="请输入账号"  v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" show-password prefix-icon="el-icon-lock"  placeholder="请输入密码" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-checkbox v-model="loginForm.remember" class="rememberme">记住密码</el-checkbox>
      <el-button type="text" @click="register" class="register">立即注册</el-button>
      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%;" size="medium" @click="submitForm('refForm')" :loading="loadingForm">
          <span>立即登录</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {login} from '@/api/login'
  export default {
    data() {
      return {
        loadingForm: false,
        loginForm: {
          username: 'admin',
          password: '123456',
          remember: false,
        },
        loginRules: {
          username: [
            {required : true, message: "账号不能为空！！！", trigger: "blur"},
            {min: 2, max: 10, message: "长度在 2 到 10 个字符！！！", trigger: "blur"}
          ],
          password: [
            {required : true, message: "密码不能为空！！！", trigger: "blur"},
            {min: 6, max: 116, message: "长度在 6 到 16 个字符！！！", trigger: "blur"}
          ],
        }
      };
    },
    methods: {
      // 登录
      submitForm(refForm){
        this.$refs[refForm].validate((valid) =>{
          if (valid) {
            this.loadingForm = true
            login(this.loginForm).then( res => {
              if(res.data.code == 200){
                window.localStorage.setItem("token",res.data.data.tokenValue)
                window.localStorage.setItem("loginName",JSON.stringify(this.loginForm.username))
                this.$message.success("登录成功！！！")
                this.$router.push('/home')
              }
            })
          } else {
            this.loadingForm = false
            return false;
          }
        })
      },
      // 注册
      register() {
        this.$router.push("/register");// 路由,跳转到主页面
      },
    }
  }
</script>

<style lang="scss" scoped>
  #particles-js {
    width: 100%;
    height: calc(100% - 100px);
    position: absolute;
  }
  .login-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0e6cff;
  }
  .login-box{
    border: 1px solid #DCDEF6;
    background-color: white;
    width: 400px;
    margin: 150px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title{
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
  label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
  }
  .register {
    position: relative;
    text-align: right;
    padding-left: 258px;
    color: #303133;
    margin: 0px 0px 15px;
  }
  .register:hover {
    color: blue;
  }
</style>
